<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <style>
        html, body {
            color:#2a3f17;
            width: 100%;
            margin: 0 auto;
            padding: 0;
            }
        .top {
            display: flex;
            justify-content: space-between;
            width: 1920px;
            height: 50px;
            background-color: bisque;
            line-height: 50px;
        }
        .iconfont {
            transform: scale(2);
            transition-duration: 0.6s;
        }
        .iconfont:hover {
            transform: scale(1);
        }
        .iconfont2 {
            transform: scale(2);
            transition-duration: 0.6s;
        }
        .iconfont2:hover {
            transform: scale(1);
        }
        .lv {
            float:left;
            position: relative;
            top:-46px;
            left:804px;
            width: 200px;
            height: 200px;
            background-color: #81c04b;
            background-image: url(相机.png);
            background-repeat: no-repeat;
            background-position: center center;
            transition-duration: 0.3s;
        }
        .lv:hover {
            transform:scale(1.2);
        }
        .circle {
            margin: 15px;
            width: 163px;
            height: 163px;
            border:5px solid white;
            border-radius: 50%;
        }
        .wu-gui {
            width: 1920px;
            height: 930px;
            background-image: url(乌龟.png);
        }
        .headline {
            font-size: 70px;  
            position: relative;
            left:-600px;
            top:250px;
            color: #2a3f17;
        }
        .little {
            font-size: 35px;
            position: relative;
            left:-610px;
            top:250px;
            color :#2a3f17;
        }
        .explore {
            display: inline-block;
            position: relative;
            left:-700px;
            top:249px;
            width: 275px;
            height: 95px;
            background-color: #2a3f17;
            font-size: 45px;
            color: white;
            line-height: 92px;
            text-align: center;
            
        }
        .explore:hover {
            transform: scale(1.2);
            transition-duration: 0.3s;
        }
        .bird-1 {
            float:left;
            position: relative;
            left:75px;
            top:730px;
            background-image: url(火烈鸟1.png);
            width: 333px;
            height: 500px;
            padding-right: 10px;
            transition-duration: 0.3s;
            transition-timing-function: linear;
        }
        .bird-1:hover {
            transform:translateY(-50px);
        }
        .bird-2 {
            float:left;
            position: relative;
            left:215px;
            top:730px;
            background-image: url(火烈鸟2.png);
            width: 333px;
            height: 500px;
            transition-duration: 0.4s;
            transition-timing-function: linear;
        }
        .bird-2:hover {
            transform:translateY(-50px);
        }
        .bird-3 {
            float:left;
            position: relative;
            right: -367px;
            top:730px;
            background-image: url(火烈鸟3.png);
            width: 333px;
            height: 500px;
            transition-duration: 0.4s;
            transition-timing-function: linear;
        }
        .bird-3:hover {
            transform:translateY(-50px);
        }
        .white {
            width: 1920px;
            height: 600px;
            
        }
        .sign {
            float:left;
            width: 950px;
            height: 540px;
            background-color: #e0dfdf;
            position: relative;
            left:495px;
            top:-100px;
            transition-duration: 1.3s;
        }
        .sign:hover {
            transform:translateY(-100px);
        }
        .content {
            width: 840px;
            height: 260px;
            margin-top: 70px;
            margin-left: 55px;
            font-size: 21px;
        }
        .sign-up {
            width: 200px;
            height: 75px;
            text-align: center;
            background-color: #2a3f17;
            font-size: 45px;
            color: white;
            margin: 30px auto;
            transition-duration: 0.6s;
        }
        .sign-up:hover {
            transform: scale(0.8);
        }
        .lu {
            width: 1920px;
            height: 760px;
            background-image: url(鹿.png);
        }
        .difference {
            width: 1920px;
            height: 695px;
            padding-top: 20px;
            /* background-color: rgb(137, 163, 210); */
        }
        .title {
            font-size: 60px;
            text-align: center;
            width: 310px;
            height: 100px;
            margin-left:auto;
            margin-right: auto;
            border: 5px solid white;
            /* background-color: chocolate; */
            transition-duration: 0.6px;
        }
        .title:hover {
            border: 5px solid black;
            
        }
        .animal {
            display: flex;
            justify-content: space-between;
            width: 1146px;
            height: 414px;
            margin: 0 auto;
        }
        .box-1,
        .box-2,
        .box-3,
        .box-4 {
            margin-top: 10px;
            width: 263px;
            height: 412px;
            color: #2a3f17;
            background-color: #e0dfdf;
            transition-duration: 0.6s;
        }
        .box-1:hover {
            transform: translateY(-70px);
        }
        .box-2:hover {
            transform: translateY(-70px);
        }
        .box-3:hover {
            transform: translateY(-70px);
        }
        .box-4:hover {
            transform: translateY(-70px);
        }
        .name {
            display: block;
            width: 110px;
            height: 55px;
            margin: 0 auto;
            font-size: 22px;
            text-align: center;
            line-height: 55px;
            /* background-color: rgb(128, 149, 107); */
        }
        .introduction {
            display: block;
            width: 214px;
            height: 53px;
            /* background-color: chocolate; */
            margin: 0 auto ;
            font-size: 22px;
            text-decoration: underline;
            text-align: center;
            line-height: 53px;
        }
        .know-more {
            width: 363px;
            height: 80px;
            margin-left: auto;
            margin-right: auto;
            margin-top:60px;
            border: 2px solid black;
            /* background-color: rgb(194, 156, 59); */
            font-size: 40px;
            text-align: center;
            line-height: 80px;
            transition-duration: 0.6s;
        }
        .know-more:hover {
            background-color: #2a3f17; 
            color:white;
        }
        .tu-wen {
            display: flex;
            justify-content: center;
            width: 1920px;
            height: 1170px;
            padding-top: 100px;
            /* background-color: darkgray; */
        }
        .tu {
            width: 705px;
            height: 1020px;
            background-image: url(松鼠.png);
        }
        .wen {
            width: 660px;
            height: 868px;
            padding-left: 120px;
            padding-right: 120px;
            padding-top: 65px;
            padding-bottom: 76px;
            /* background-color: chocolate; */
        }
        .the-photo {
            font-size: 47px;
            transition-duration: 0.3s;
        }
        .the-photo:hover {
            transform: translateY(-50px);
        }
        .Family-Farm {
            width: 576px;
            height: 170px;
            /* background-color: cornflowerblue; */
            font-size: 28px;
            transition-duration: 0.5s;
        }
        .Family-Farm:hover {
            transform:scale(1.2);
            transform-origin: 0 0;
        }
        .lie {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 546px;
            height: 678px;
            /* background-color: rgb(98, 98, 106); */
        }
        .r-b {
            transition-duration: 0.6s;
        }
        .r-b:hover {
            transform: translateX(150px);
        }
        .num,
        .line {
            font-size: 30px;
        }
        .num {
            display: inline-block;
            width: 70px;
            height: 70px;
            text-align: center;
            line-height: 70px;
            border: 4px solid #455734;
            border-radius: 50%;
        }
        .bottom {
            display: flex;
            justify-content: center;
            padding-top: 100px;
            width: 1920px;
            height:400px;
            border-top: 2px solid black;
        }
        .left {
            float:left;
            position: relative;
            bottom: -56px;
            width: 361px;
            height: 216px;
            font-size: 50px;
            line-height: 2;
        }
        .mid {
            float:left;
            position: relative;
            line-height: 2;
            bottom: -70px;
            width: 361px;
            height: 216px;
            font-size: 30px;
            color: #4d5b41;
        }
        .right {
            background-color: #949f8b;
            width: 372px;
            height: 73px;
            font-size:40px;
            line-height: 73px;
            text-align: center;
            position: relative;
            color:white;
            top:100px;
            right:5px;
            transition-duration: 0.6s;
        }
        .right:hover {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div class="max">
        <div class="top">
            <span class="iconfont">&#xe61a;</span>
            <span class="iconfont2">&#xe621;</span>
        </div>
        <div class="lv">
            <div class="circle"></div>
        </div>
        
        <div class="bird-1"></div>
        <div class="bird-2"></div>
        <div class="bird-3"></div>
        
        <div class="wu-gui">
            <span class="headline">Animal Photography</span>
            <span class="little">A silhouette of them, a simple little acttion, here are the photographer’s
            eyes the best of them, their laughter, their love, their every vivid, are recored
            by us.</span>
            <span class="explore">EXPLORE</span>
        </div>
        
        <div class="white"></div>
        <div class="sign"> 
            <div class="content">“Family Farms is the best place，where I can buy fruit,vegetable,meat,honey,milk,
        eggs and so on for my retaurant directly fromupplier. Super convinient.Thank you”
        xdccnfc cfvfesc cfnccnjdcn cfjdcdsr dcwwzwqg ejs dddc ddf fnfjv eij fvnv jnxzexh cn
        cdcmdsc ddnc, cddmdcds dncdn cdcn wqeoeas, dcndassasas,cdcndcnc cciqoskxm
        cbdcpqslwq nfnere nfncsfjjc dndcww frhfjnc qpdjweiw cnncqe, cqjsdc ccn dcjndc ,
        ncf cdncjd dcdjcndq csjncq dcdncf dcdjdnc cdjsq, qkodkqe wqcnpsdc cdnqq qcw,
        cqnonxj dcdcnd dcnjsdvb wcnwq cowwncjq jjcnjncqnw wcq c wd cwch, cnjncnc ece
        cdcnncdwnc nenwc dcnnc cjcj , c cjrnc wecwc .</div>
            <div><div class="sign-up">SIGN UP</div></div>
        </div>
        <div class="lu">

        </div>
        <div class="difference">
            <div class="title">Difference</div>
            <div class="animal">
                <div class="box-1">
                    <img src="马.png" >
                    <span class="name">Horse</span>
                    <span class="introduction">A difference story</span>
                </div>
                <div class="box-2">
                    <img src="袋鼠.png" >
                    <span class="name">Kangaroo</span>
                    <span class="introduction">A difference story</span>
                </div>
                <div class="box-3">
                    <img src="狮子.png" >
                    <span class="name">Lion</span>
                    <span class="introduction">A difference story</span>
                </div>
                <div class="box-4">
                    <img src="小鸟.png" >
                    <span class="name">Hummingbird</span>
                    <span class="introduction">A difference story</span>
                </div>
            </div>
            <div class="know-more">Know more</div>
        </div>
        

        </div>
        <div class="tu-wen">
            <div class="tu"></div>
            <div class="wen">
                <div class="the-photo">The Photo</div>
                <div class="Family-Farm">“Family Farms is the best placewhere I
                can buy fruit,vegetable,meat,honey,milk,
                eggs and so on for my retaurant directly from
                supplier. Super convinient.Thank you”</div>
                <div class="lie">
                    <div class="r-b">
                        <span class="num">1</span>
                        <span class="line">Looking for it</span>
                    </div>
                    <div class="r-b">
                        <span class="num">2</span>
                        <span class="line">Cultivate feelings</span>
                    </div>
                    <div class="r-b">
                        <span class="num">3</span>
                        <span class="line">Shooting</span>
                    </div>
                    <div class="r-b">
                        <span class="num">4</span>
                        <span class="line">Harvest achievement</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="left">IN THE WILD<br/>IN THE SEA</div>
            <div class="mid">
                <span>MOER<br/></span>
                <span>We create art.<br/>We create life.</span>
            </div>
            <div class="right">Big world</div>
        </div>
    </div>
</body>
</html>